<template>
    <view class="music-btn" @click="toggle">
        <image v-if="currentPlayStatus" class="music-icon play" src="@/static/common/music-icon.png" mode=""></image>
        <image v-else class="music-icon pause" src="@/static/common/music-icon-pause.png" mode=""></image>
        <Audio :src="src" :playStatus="currentPlayStatus" @play="onPlay"></Audio>
    </view>
</template>
<script>
import { Audio } from '@/components/Audio/index.vue';
export default {
    name: 'MusicBtn',
    data() {
        return {
            currentPlayStatus: true
        };
    },
    props: {
        src: {
            type: String,
            default: ''
        },
        playStatus: {
            type: Boolean,
            default: true
        }
    },
    computed: {},
    created() {},
    methods: {
        onPlay() {
            this.currentPlayStatus = true;
        },
        toggle() {
            this.currentPlayStatus = !this.currentPlayStatus;
        }
    },
    watch: {
        playStatus: {
            handler(newVal, oldVal) {
                this.currentPlayStatus = newVal;
            },
            immediate: true
        }
    },
    components: { Audio }
};
</script>
<style lang="scss">
.music-btn {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    &::before {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200%;
        height: 200%;
        content: '';
        z-index: 2;
        transform: translate(-50%, -50%);
    }
    .music-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .play {
        animation: play 2s linear infinite;
    }
}
@keyframes play {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}
</style>
